<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebGL</title>
<style>
body { margin:0;}
</style>
</head>
<body>
<script src="three.js"></script>
<script>
var scene = new THREE.Scene();        
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.CubeGeometry(3,3,3);
//var material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
var materials = [];
for (var i = 1; i <= 6; ++i) {
	var texture = new THREE.TextureLoader().load('side' + i + '.jpg');
    materials.push(new THREE.MeshBasicMaterial({ map:texture, side: THREE.DoubleSide }));
}
var mesh = new THREE.Mesh(geometry, materials);
//mesh.position.set(0,0,0);
mesh.castShadow = true;
scene.add(mesh);

//var geometry = new THREE.SphereGeometry(2, 18, 12);
//var geometry = new THREE.SphereGeometry(2, 18, 12, 0, 2*Math.PI, Math.PI/4, Math.PI/4);

var geometry = new THREE.CylinderGeometry(1, 1, 2, 18, 3);
var material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
var mesh = new THREE.Mesh(geometry, material);
mesh.rotation.x = -Math.PI/2;
mesh.castShadow = true;
scene.add(mesh);

//var geometry = new THREE.TorusGeometry(3, 1, 12, 18, Math.PI/3*2);
//var geometry = new THREE.TorusKnotGeometry(2, 0.5, 50, 8);
//var geometry;
//var loader = new THREE.FontLoader();
//loader.load('helvetiker_regular.typeface.json', function(font) {
//	geometry = new THREE.TextGeometry('Hello', {size: 1, height: 1});
//});

/*
// 自定义梯台
var geometry = new THREE.Geometry();
// 设置顶点位置
// 顶部4顶点
geometry.vertices.push(new THREE.Vector3(-1, 2, -1));
geometry.vertices.push(new THREE.Vector3(1, 2, -1));
geometry.vertices.push(new THREE.Vector3(1, 2, 1));
geometry.vertices.push(new THREE.Vector3(-1, 2, 1));
// 底部4顶点
geometry.vertices.push(new THREE.Vector3(-2, 0, -2));
geometry.vertices.push(new THREE.Vector3(2, 0, -2));
geometry.vertices.push(new THREE.Vector3(2, 0, 2));
geometry.vertices.push(new THREE.Vector3(-2, 0, 2));
// 设置顶点连接情况
// 顶面
geometry.faces.push(new THREE.Face3(0, 1, 3));
geometry.faces.push(new THREE.Face3(1, 2, 3));
// 底面
geometry.faces.push(new THREE.Face3(4, 5, 6));
geometry.faces.push(new THREE.Face3(5, 6, 7));
// 四个侧面
geometry.faces.push(new THREE.Face3(1, 5, 6));
geometry.faces.push(new THREE.Face3(6, 2, 1));
geometry.faces.push(new THREE.Face3(2, 6, 7));
geometry.faces.push(new THREE.Face3(7, 3, 2));
geometry.faces.push(new THREE.Face3(3, 7, 0));
geometry.faces.push(new THREE.Face3(7, 4, 0));
geometry.faces.push(new THREE.Face3(0, 4, 5));
geometry.faces.push(new THREE.Face3(0, 5, 1));
*/

//var material = new THREE.MeshBasicMaterial({ color: 0xffffff });
//var material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
//var material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });


var plane = new THREE.Mesh(new THREE.PlaneGeometry(8, 8, 16, 16), new THREE.MeshLambertMaterial({color: 0xcccccc}));
plane.rotation.x = -Math.PI/2;
plane.position.y = -1;
plane.receiveShadow = true;
scene.add(plane);

var light = new THREE.SpotLight(0xffffff, 1, 100, Math.PI/6, 25);
light.position.set(5, 5, 3);
light.target = mesh;
light.castShadow = true;
scene.add(light);

var ambient = new THREE.AmbientLight(0x666666);
scene.add(ambient);

camera.position.y = 2;
a = 0;
r = 5;

function render() {	
	//requestAnimationFrame(render);
	//camera.position.x 左+右-, camera.position.y 下+上-, camera.position.z 远+近-
	//a += 0.005;
	//r += 0.002;
	camera.position.x = r * Math.sin(a);
	camera.position.z = r * Math.cos(a);
	//camera.position.y += 0.001;
	camera.rotation.y = a;
	renderer.render(scene, camera);
}
render();

function keyDown(e) {
	//console.log(e.which);
	if(e.which == 37){//←
		a += 0.05;
		render();
	}else if(e.which == 39){//→
		a -= 0.05;
		render();
	}else if(e.which == 38){//↑
		camera.position.y -= 0.1;
		render();
	}else if(e.which == 40){//↓
		camera.position.y += 0.1;
		render();
	}else if(e.which == 107){//+
		r += 0.1;
		render();
	}else if(e.which == 109){//-
		r -= 0.1;		
		render();
	}
}

function mouseWheel(e) {
	if(e.deltaY>0){
		r += 0.1;
		render();
	}else{
		r -= 0.1;		
		render();
	}
}

var MD0X0, MD0Y0, isMouseDown;
function mouseDown(e) {
	//console.log(e);
	if(e.button == 0){
		isMouseDown = true;
		MD0X0 = e.clientX;
		MD0Y0 = e.clientY;
	}
}

function mouseMove(e) {
	//console.log(e);
	if(isMouseDown){
		var MD0X1 = e.clientX;
		var MD0Y1 = e.clientY;
		var disx = MD0X1 - MD0X0;
		var disy = MD0Y1 - MD0Y0;
		MD0X0 = e.clientX;
		MD0Y0 = e.clientY;
		//console.log(disx, disy);
		a += -disx/300;
		camera.position.y += disy/100;
		render();
	}
}

function mouseUp(e) {
	//console.log(e);
	if(e.button == 0){
		isMouseDown = false;
	}
}

document.onkeydown = keyDown;
document.onmousewheel = mouseWheel;
document.onmousemove = mouseMove;
document.onmousedown = mouseDown;
document.onmouseup = mouseUp;

</script>
</body>
</html>
